<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx">
			<template v-slot:header>
				<view class="sticky-item">
					<view class="date">累计报名人数</view>
					<view class="amount">
						<view>{{dataCount}} 人</view>
					</view>
				</view>
			</template>
			
			<template v-slot:content>
				<!--内容 start-->
				<view v-for="(item,index) in dataList" :key="index" class="list-view">
					<view class="list-item" hover-class="hover" :hover-stay-time="150" @click="goSignUpAudit(item.id)">
						<view class="content-box">
							<!-- <image :src="item.img_logo" :size="30" class="logo"></image> -->
							<view class="credit" :class="item.credit_score_class">
								<view class="score">{{item.credit_score}}</view>
							</view>
							<view class="des-box">
								<view class="tit" v-html="item.user_phone"></view>
								<view class="time">{{item.add_time}}</view>
							</view>
						</view>
						<view class="money-date">
							<view class="des-box">
								<view class="time">
									<tui-tag size="small" :plain="false" type="high-green" shape="circle" style="line-height:10px;margin-left:10px;">{{item.status_name}}</tui-tag>
								</view>
							</view>
						</view>
					</view>	
				</view>
				<!--内容 end-->
			</template>
		</tui-sticky>
		
		<tui-fab :bottom="150" :btnList="fabList" @click="goFabUrl"></tui-fab>
		
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	import tuiFab from "@/components/thorui/tui-fab/tui-fab.vue"
	export default {
		components:{
			footerMenu,
			tuiIcon,
			tuiSticky,
			tuiLoadmore,
			tuiNomore,
			tuiTag,
			tuiFab,
		},
		data() {
			return {
				scrollTop: 0,
				loadding: false,
				pullUpOn: true,
				
				infoId: 0,		
				dataList: [],
				dataCount: 0,
				meetId: 0,
				
				
				fabList:[{bgColor: "#16C2C2",text: "会议",fontSize: 28,color: "#fff"},
						{bgColor: "#FF0099",text: "报名",fontSize: 28,color: "#fff"},
						{bgColor: "#64B532",text: "签到",fontSize: 28,color: "#fff"},
						{bgColor: "#ff4700",text: "签离",fontSize: 28,color: "#fff"},
						{bgColor: "#FFA500",text: "奖励",fontSize: 28,color: "#fff"}],
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
						{icon: "service", text: "发现", size: 24},
						{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/shop/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			
			goFabUrl: function(e) {
				let jumpUrl = '';
				let idx = e.index || 0;
				if(idx == 0) {
					jumpUrl = '/pages/meet/admin?info_id=' + this.meetId;
				} else if (idx == 1){
					jumpUrl = '/pages/meet/sign-up?info_id=' + this.meetId;
				} else if (idx == 2){
					jumpUrl = '/pages/meet/sign-in?info_id=' + this.meetId;
				} else if (idx == 3){
					jumpUrl = '/pages/meet/sign-out?info_id=' + this.meetId;
				} else if (idx == 4){
					jumpUrl = '/pages/meet/award?info_id=' + this.meetId;
				}
				 uni.navigateTo({
				 	url: jumpUrl,
				 });
			},
			
			goSignUpAudit: function(e) {
				uni.navigateTo({
					url: '/pages/meet/sign-up-audit?id=' + e,
				});
			},
			
			getdataList: function(type) {
				uni.request({
					url: this.$apiUrl + '/api/meet/signUpList',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						info_id: this.infoId
					},
					success: (res) => {
						let resData = res.data['data'];
						this.dataList = resData['list'];
						this.dataCount = resData['total'];
					}
				});
			},
			
		},
		
		
		//页面滚动执行方式
		onPageScroll(e) {
		//	this.scrollTop= e.scrollTop
		},
		
		onLoad: function(options) {
			this.infoId = options.info_id || 0;
			this.meetId = this.infoId;
			this.getdataList();
		},
		
		
		onPullDownRefresh: function() {
		},
		
		onReachBottom: function() {
		},
		
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tips {
		background: #fff;
		padding: 50rpx 34rpx;
		color: #555;
		font-size: 24rpx;
		line-height: 42rpx;
		position: relative;
	}

	.tips::before {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.sticky-container{
		position: relative;
	} 
		
	/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.amount {
		text-align: right;
		color: #19be6b;
		font-size: 36rpx;
		font-weight: 700;
	}

	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-view::after {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.list-item::after {
		left: 120rpx
	}

	.item-last::after {
		left: 0 !important
	}

	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		flex-grow: 1;
		border-radius: 50rpx;
	}
	
    .credit{width: 100rpx;height: 100rpx;flex-grow: 1;border-radius: 50rpx;}
	.credit_score_0{ background-color: #666;}
	.credit_score_20{ background-color: #871F78;}
	.credit_score_40{ background-color: #FF0000;}
	.credit_score_60{ background-color: #CCFF33;}
	.credit_score_80{background-color: #11D61B;}
	.score{font-size: 60rpx;color: #fff;line-height: 100rpx;font-weight: bold;text-align: center;}
	
	
	.des-box {
		min-height: 100rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time {
		color: #888
	}
	
	.time-push{
		color:#11D61B;
	}
	
	.time-money{
		color:#F71B1B;
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}
	
	.money-date {
		font-size: 28rpx;
		font-weight: 500;
		color: #ff5800;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.add {
		color: #ff5800 !important;
	}
	
	.del {
		color: #19be6b !important;
	}
</style>